import React from 'react';
import { useSelector } from 'react-redux';
import {
  DetailWrapper,
  Header,
  Content,
} from './style';

const Detail = () => {
  const contentList = useSelector((state: any) => state.getIn(['detail', 'detailContent']));
  const title = useSelector((state: any) => state.getIn(['detail', 'detailTitle']));
  return (
    <>
      <DetailWrapper>
        <Header>
          {title}
        </Header>
        {
          contentList.map((item: any) => (
            <Content key={item.getIn(['id'])}>
              {item.getIn(['content'])}
            </Content>
          ))
        }
      </DetailWrapper>
    </>
  );
};

export default Detail;
